<template>
  <div class="main">
    <!--头部-->
    <div class="header">
      <div class="container">
        <el-row :gutter="24">
          <el-col :span="24">
            <ul class="ulList clear">
              <li v-for="(item,index) in navList" :class="{active:selectedNav===item.page}" @click="navTab(index)"
                :key="item.id">{{item.name}}</li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--首页-->
    <router-view></router-view>
    <!--尾部-->
    <div class="footer">
      <div class="container">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-row :gutter="20" class="footer-left">
              <el-col :span="7">
                <ul>
                  <li>关于我们</li>
                  <li @click="linkAbout('0')">公司简介</li>
                  <li @click="linkAbout('3')">联系我们</li>
                  <li @click="linkAbout('1')">加入我们</li>
                </ul>
              </el-col>
              <el-col :span="7">
                <ul>
                  <li>帮助中心</li>
                  <li @click="linkOrders">查询订单</li>
                  <li @click="linkAbout('4')">常见问题</li>
                  <li @click="linkAbout('2')">服务条款</li>
                </ul>
              </el-col>
              <el-col :span="7">
                <ul>
                  <li>关注我们</li>
                  <li><a>新浪微博</a></li>
                </ul>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <div class="paddingT38 text-center">
              <p>一键下单 免费上门</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="text-center contact">
              <p>—— 咨询服务热线 ——</p>
              <h1>400-988-****</h1>
              <p>周一至周五 </p>
              <p>9：00-18：00</p>
            </div>
          </el-col>
        </el-row>
        <div class="text-center marginT35 color999 paddingB10px">
          维修师 &nbsp;沪ICP备&nbsp;164455098*号
        </div>
      </div>
    </div>
    <!--侧边栏-->
    <div class="side">
      <div class="telphone">
        <img src="./frontEnd/assets/img/tel.jpg" />
      </div>
      <div class="scan" @mouseover="toggleShow()" @mouseout="toggleShow()">
        <img src="./frontEnd/assets/img/wxs.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
  import r from '../utils/RequestUtilcopy';
  export default {
    name: 'webmain',
    data() {
      return {
        IMG_BASE_URL: '',
        isShow: false,
        selectedNav: window.sessionStorage.getItem("selectedNavBar") === null ? "web/index" : window.sessionStorage
          .getItem("selectedNavBar"),
        navList: [{
          name: '首页',
          path: '/web/index',
          page: 'index'
        }, {
          name: '手机维修',
          path: '/web/selectfault',
          page: 'selectfault'
        }, {
          name: '订单查询',
          path: '/web/orders',
          page: 'orders'
        }, {
          name: '服务流程',
          path: '/web/index',
          page: 'serviceflow'
        }, {
          name: '关于我们',
          path: '/web/about',
          page: 'aboutus'
        }]
      }
    },
    methods: {
      linkOrders() {
        this.$router.push({
          path: '/web/orders'
        });
        window.sessionStorage.setItem("selectedNavBar", "web/orders");
        this.selectedNav = this.navList[2].page;
      },
      linkAbout(index) {
        window.sessionStorage.setItem("selectedNavBar", "web/aboutus");
        this.$router.push({
          path: '/web/about',
          query: {
            index: index
          }
        });
        this.selectedNav = this.navList[4].page;
      },
      //二维码
      toggleShow() {
        this.isShow = !this.isShow
      },
      //			导航切换
      navTab(index) {
        let that = this;
        that.selectedNav = that.navList[index].page;
        window.sessionStorage.setItem("selectedNavBar", that.navList[index].page);
        this.$router.push({
          path: that.navList[index].path
        });
        //定位到 服务流程的位置 
        if (index === 3) {
          let total = 1600;
          let distance = document.documentElement.scrollTop || document.body.scrollTop;
          // 平滑滚动，时长500ms，每10ms一跳，共50跳
          let step = total / 50
          if (total > distance) {
            smoothDown()
          } else {
            let newTotal = distance - total + 100
            step = newTotal / 50
            smoothUp()
          }

          function smoothDown() {
            if (distance < total) {
              distance += step
              // Firefox
              document.documentElement.scrollTop = distance
              // Chrome
              document.body.scrollTop = distance
              setTimeout(smoothDown, 10)
            } else {
              document.documentElement.scrollTop = total
              document.body.scrollTop = total
              window.pageYOffset = total
            }
          }

          function smoothUp() {
            if (distance > total) {
              distance -= step
              // Firefox
              document.documentElement.scrollTop = distance
              // Chrome
              document.body.scrollTop = distance
              setTimeout(smoothUp, 10)
            } else {
              document.documentElement.scrollTop = total
              document.body.scrollTop = total
              window.pageYOffset = total
            }
          }
        }
      }
    },
    mounted: function () {
      window.sessionStorage.setItem("selectedNavBar", "web/index");
    }
  }

</script>

<style>
  @import url("./frontEnd/assets/css/index.css");

  .main {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
  }

  .logo {
    line-height: 84px;
    vertical-align: middle;
    padding: 22px 0;
  }

  .ulList {
    padding: 30px 0;
  }

  .ulList li {
    float: left;
    padding: 0 31px;
    font-weight: bold;
    color: #8c9dac;
    border-right: 1px solid #8c9dac;
  }

  .ulList li:last-child {
    border-right: none;
  }

  .ulList li:hover,
  .ulList li.active {
    color: #006ab7;
    cursor: pointer;
  }

  .contact {
    margin: 55px 0;
  }

  .contact p {
    margin: 5px;
  }

</style>
